<template>
  <div class="mailModule-left">
    <el-card class="box-card">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showModule" style="    margin: 10px 10px 10px 0;">新建模板</el-button>
      <div
        v-for="(item,index) in findAll"
        :key="item.mailTemplateId"
        class="text item"
        :class="{active:indexs == index}"
        @click="_clickModuleTitle(index,item)"
      >
        {{item.mailTemplateName}}
        <el-button
          size="mini"
          icon="el-icon-close"
          circle
          @click="_deleteModule(item.mailTemplateId)"
        ></el-button>
      </div>
    </el-card> 
    <el-dialog title="新建模板" :visible.sync="FormVisible" width="400px">
      <el-form :model="form" label-width="100px" :rules="rules" ref="ruleForm">
        <el-form-item label="模板标题：" prop="mailTemplateName">
          <el-input v-model="form.mailTemplateName" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="邮件内容：" prop="context">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6}"
            placeholder="请输入内容"
            v-model="form.context"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showModule">取 消</el-button>
        <el-button @click="_addMailTemplate('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const ERR_OK = 200;
export default {
  data() {
    return {
      findAll: [],
      FormVisible: false,
      indexs: "",
      form: {
        mailTemplateName: "",
        context: "",
        subject: "WARRANTY"
      },
      rules: {
        mailTemplateName: [
          { required: true, message: "请输入模板标题", trigger: "blur" }
        ],
        context: [
          { required: true, message: "请输入模板内容", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.findAlls();
  },
  methods: {
    // 获取模板列表
    findAlls() {
      this.$ajax.get( this.GLOBAL.warrantyService + "/mailTemplate/findAll?businessName=" + this.$route.name.substring(0,2)).then(res => {
        if(res.data.code === ERR_OK){
          this.findAll = res.data.data;
          this.$emit('findAll',res.data.data[0])
          this.indexs = 0
        }
      });
    },
    // 列表点击  
    _clickModuleTitle(index, val) {  
      if (index === this.indexs) { 
        return;  
      }  
      this.indexs = index;
      this.$emit('findAll',val)
    },
    // 删除模板
    _deleteModule(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => { 
        this.$ajax
          .get( this.GLOBAL.warrantyService + "/mailTemplate/deleteTemplateById/" + id)
          .then(res => {
            if (res.data.code === ERR_OK) {
              this.$message.success("删除成功");
              this.findAlls();
              this.indexs = '0'
            } else {
              this.$message.error("删除失败");
            }
          });
      });
    },
    // 添加模板
    _addMailTemplate(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
            this.form.businessName =  this.$route.name.substring(0,2)
          this.$ajax({
            method: "post",
            url:  this.GLOBAL.warrantyService + "/mailTemplate/addMailTemplate",
            data: this.form
          }).then(res => {
            if (res.data.code === ERR_OK) {
              this.findAlls();
              this.FormVisible = false;
              this.$message.success("添加成功");
              this.form = {}
            } else {
              this.$message.error("添加失败");
            }
          });
        } else {
          return false;
        }
      });
    },
    showModule() {
      this.FormVisible = this.FormVisible ? false : true;
    },
  },
  watch: {
  }
};
</script>

<style>
.mailModule-left .el-card__body {
  padding: 0;
}
</style>
 

<style lang="stylus" scoped>
.mailModule-left {
  button {
    margin: 10px;
  }

  .el-card {
    border: none;
  }

  .el-dialog__body {
    padding-bottom: 0;
  }

  textarea {
    resize: none;
  }

  .item {
    position relative
    padding: 10px 15px;
    line-height 24px;
    border-bottom: 1px solid #dcdfe6;
    cursor: pointer;

    &.active {
      color: #ffffff;
      background: #409EFF;

      button {
        display: block;
      }

      &:hover {
        background: #409EFF;
      }
    }

    button {
      position absolute
      right 0
      top 6px;
      padding: 0;
      display: none;
    }

    &:hover {
      background: #f1f1f1;

      button {
        display: block;
      }
    }
  }
}
</style>

